<template>
  <div class="test-container">
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <!-- <div class="list-button-group">
        <div class="button-item">
          <el-button
            type="primary"
            icon="el-icon-upload2"
            @click="onExportButtonClick"
          >
            导出
          </el-button>
        </div>
        <div class="button-item">
          <el-button
            type="primary"
            icon="el-icon-printer"
            v-print="printObj"
            @click="print"
          >
            选择打印/打印全部
          </el-button>
        </div>
      </div> -->
      <div class="table-list">
        <el-table
          v-loading="listLoading"
          ref="table"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
          highlight-current-row
          height="100%"
          :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }"
          border
        >
          <el-table-column
            align="center"
            prop="mingcheng"
            label="名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="xingbie"
            label="型别"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="chuchanghm"
            label="出厂号码"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="weiyibm"
            label="唯一编码"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="danwei"
            label="单位"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tuopanbh"
            label="托盘号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="huoweibh"
            label="货位号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="leixing"
            label="类型"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="guazaih"
            label="挂载号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="guishuh"
            label="归属号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="guidingfxzq"
            label="规定返修周期"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tiaoma"
            label="条码"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zhuanye"
            label="专业"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="bianma"
            label="编码"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zhongyaod"
            label="重要度"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="shengchancj"
            label="生产厂家"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="chuchangrq"
            label="出厂日期"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="jishilx"
            label="计时类型"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zonggongzsc"
            label="总工作时次"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="xiuhougzsc"
            label="修后工作时次"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="cexuh"
            label="删序号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tuzhibh"
            label="图纸编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pihao"
            label="批号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="xianchuzk"
            label="现处状况"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zhuangkuangsm"
            label="状况说明"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="cunfangwz"
            label="存放位置"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="fanxiucs"
            label="翻修次数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="chuyucjszt"
            label="处于超技术状态"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="anzhuangwz"
            label="安装位置"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="weizhi"
            label="位置"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="anzhuangxh"
            label="安装序号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="shifouqy"
            label="是否启用"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="gongchengh"
            label="工程号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="zhangjieh"
            label="章节号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="beizhu"
            label="备注"
          ></el-table-column>
          <el-table-column
            label="操作"
            min-width="60"
            fixed="right"
            prop="action"
          >
            <template #default="{ row }">
              <el-button type="text" @click="showdetile(row)">明细</el-button>
              <!-- <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        :current-page="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <div style="height: 0">
      <div id="print-content">
        <div class="print-top">
          <h2>库存明细查询</h2>
          <p class="print-time">{{ printTime }}</p>
        </div>
        <table
          border="1"
          width="100%"
          align="center"
          cellpadding="0"
          cellspacing="0"
        >
          <thead>
            <tr align="center" valign="center" height="36">
              <td>序号</td>
              <td>库房名称</td>
              <td>物资名称</td>
              <td>规格型号</td>
              <td>物资分类</td>
              <td>数量</td>
              <td>质量等级</td>
              <td>主管单位</td>
              <td>物资区分</td>
              <td>计量单位</td>
              <!-- <td>物资代码</td> -->
              <!-- <td>编目码</td> -->
              <td>货位</td>
              <td>托盘</td>
              <td>生产日期</td>
              <td>保质期（月）</td>
              <td>过期时间</td>
              <td>入库时间</td>
              <td>生产厂家</td>
              <td>储备等级</td>
              <!-- <td>批次号</td> -->
              <!-- <td>序列号</td> -->
              <!-- <td>合同号</td> -->
              <!-- <td>包装单元数量</td>
              <td>包装单元中单个物资数量</td> -->
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in printlist"
              :key="index"
              align="center"
              valign="center"
              height="36"
            >
              <td>{{ index + 1 }}</td>
              <td>{{ item.kufangmc }}</td>
              <td>{{ item.wuzimc }}</td>
              <td>{{ item.guigexh }}</td>
              <td>{{ item.wuzizymc }}</td>
              <td>{{ item.biaozhundwsl }}</td>
              <td>{{ item.zhiliangdjmc }}</td>
              <td>{{ item.zhuguandwmc }}</td>
              <td>{{ item.wuziqfmc }}</td>
              <td>{{ item.jiliangdw }}</td>
              <!-- <td>{{ item.wuzidm }}</td> -->
              <!-- <td>{{ item.zhengshibmm }}</td> -->
              <td>{{ item.huoweimc }}</td>
              <td>{{ item.tuopanh }}</td>
              <td>{{ item.shengchanrq }}</td>
              <td>{{ item.baozhiq }}</td>
              <td>{{ item.guoqisj }}</td>
              <td>{{ item.rukusj }}</td>
              <td>{{ item.shengchancj }}</td>
              <td>{{ item.chubeidjmc }}</td>
              <!-- <td>{{ item.picih }}</td> -->
              <!-- <td>{{ item.xulieh }}</td> -->
              <!-- <td>{{ item.hetongh }}</td> -->
              <!-- <td>{{ item.baozhuangdysl }}</td>
              <td>{{ item.baozhuangdyzdgwzsl }}</td> -->
            </tr>
            <tr align="center" valign="center" height="36">
              <td :colspan="25">数量合计：{{ printTotal }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <edit ref="edit" @fetch-data="fetchData"></edit>
    <!-- 明细 -->
    <el-dialog
      :close-on-click-modal="false"
      title="当前数据明细"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <span>
        <el-descriptions
          direction="vertical"
          :column="6"
          border
          id="descriptions"
        >
          <!-- <el-descriptions-item label="挂架名称">
            {{ ruleForm.waiguamc }}
          </el-descriptions-item>
          <el-descriptions-item label="型别">
            {{ ruleForm.leixing }}
          </el-descriptions-item>
          <el-descriptions-item label="托盘号">
            {{ ruleForm.tuopanbh }}
          </el-descriptions-item>
          <el-descriptions-item label="货位号">
            {{ ruleForm.huoweibh }}
          </el-descriptions-item>
          <el-descriptions-item label="挂架状态">
            {{ $util.getguajiazt(ruleForm.guajiazt) }}
          </el-descriptions-item>
          <el-descriptions-item label="挂架操作状态">
            {{ $util.getguajiaczzt(ruleForm.caozuozt) }}
          </el-descriptions-item>
          <el-descriptions-item label="出厂号码">
            {{ ruleForm.chuchanghm }}
          </el-descriptions-item>
          <el-descriptions-item label="现处位置">
            {{ $util.getguajiawz(ruleForm.xianchuwz) }}
          </el-descriptions-item>
          <el-descriptions-item label="生产厂家">
            {{ ruleForm.shengchancj }}
          </el-descriptions-item>
          <el-descriptions-item label="出厂日期">
            {{ ruleForm.chuchangrq }}
          </el-descriptions-item>
          <el-descriptions-item label="唯一编码">
            {{ ruleForm.weiyibm }}
          </el-descriptions-item>
          <el-descriptions-item label="使用次数">
            {{ ruleForm.shiyongcs }}
          </el-descriptions-item>
          <el-descriptions-item label="剩余次数">
            {{ ruleForm.shengyucs }}
          </el-descriptions-item>
          <el-descriptions-item label="归属飞机号">
            {{ ruleForm.guishufjh }}
          </el-descriptions-item>
          <el-descriptions-item label="挂载飞机号">
            {{ ruleForm.guazaifjh }}
          </el-descriptions-item>
          <el-descriptions-item label="规定返修周期">
            {{ ruleForm.guidingfxzq }}
          </el-descriptions-item>
          <el-descriptions-item label="预测返修周期">
            {{ ruleForm.yucefxzq }}
          </el-descriptions-item>
          <el-descriptions-item label="返修厂家">
            {{ ruleForm.fanxiucj }}
          </el-descriptions-item>
          <el-descriptions-item label="修后修理周期">
            {{ ruleForm.xiuhouxlzq }}
          </el-descriptions-item>
          <el-descriptions-item label="历史故障情况">
            {{ ruleForm.lishigzqk }}
          </el-descriptions-item>
          <el-descriptions-item label="技术通报落实情况">
            {{ ruleForm.jishutblsqk }}
          </el-descriptions-item>
          <el-descriptions-item label="检修日期">
            {{ ruleForm.jianxiurq }}
          </el-descriptions-item>
          <el-descriptions-item label="下次检修日期">
            {{ ruleForm.xiacijxrq }}
          </el-descriptions-item>
          <el-descriptions-item label="挂弹钩号码">
            {{ ruleForm.guadanghm }}
          </el-descriptions-item>
          <el-descriptions-item label="挂弹钩出厂日期">
            {{ ruleForm.guadanccrq }}
          </el-descriptions-item>
          <el-descriptions-item label="挂弹钩使用次数">
            {{ ruleForm.guadangshiycs }}
          </el-descriptions-item>
          <el-descriptions-item label="挂弹钩剩余次数">
            {{ ruleForm.guadangshengycs }}
          </el-descriptions-item>
          <el-descriptions-item label="挂弹钩预警">
            {{ ruleForm.guadangyj }}
          </el-descriptions-item>
          <el-descriptions-item label="火箭发射器">
            {{ ruleForm.huojianfsq }}
          </el-descriptions-item>
          <el-descriptions-item label="管的数量">
            {{ ruleForm.guansl }}
          </el-descriptions-item>
          <el-descriptions-item label="管的寿命">
            {{ ruleForm.guansm }}
          </el-descriptions-item>
          <el-descriptions-item label="已发射次数">
            {{ ruleForm.yifascs }}
          </el-descriptions-item>
          <el-descriptions-item label="剩余次数">
            {{ ruleForm.shengyucishu }}
          </el-descriptions-item>
          <el-descriptions-item label="到2次预警">
            {{ ruleForm.yujing }}
          </el-descriptions-item>
          <el-descriptions-item label="检修人">
            {{ ruleForm.jianxiur }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ ruleForm.beizhu }}
          </el-descriptions-item>
          <el-descriptions-item label="入库人">
            {{ ruleForm.rukur }}
          </el-descriptions-item>
          <el-descriptions-item label="经手人">
            {{ ruleForm.jingshour }}
          </el-descriptions-item>
          <el-descriptions-item label="出库人">
            {{ ruleForm.chukur }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ ruleForm.createName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ ruleForm.createTime }}
          </el-descriptions-item> -->
          <el-descriptions-item label="名称">
            {{ ruleForm.mingcheng }}
          </el-descriptions-item>
          <el-descriptions-item label="唯一编码">
            {{ ruleForm.weiyibm }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ ruleForm.leixing }}
          </el-descriptions-item>
          <el-descriptions-item label="单位">
            {{ ruleForm.danwei }}
          </el-descriptions-item>
          <el-descriptions-item label="型别">
            {{ ruleForm.xingbie }}
          </el-descriptions-item>
          <el-descriptions-item label="出厂号码">
            {{ ruleForm.chuchanghm }}
          </el-descriptions-item>
          <el-descriptions-item label="挂载号">
            {{ ruleForm.guazaih }}
          </el-descriptions-item>
          <el-descriptions-item label="归属号">
            {{ ruleForm.guishuh }}
          </el-descriptions-item>
          <el-descriptions-item label="归属机型">
            {{ ruleForm.guishujx }}
          </el-descriptions-item>
          <el-descriptions-item label="规定返修周期">
            {{ ruleForm.guidingfxzq }}
          </el-descriptions-item>
          <el-descriptions-item label="条码">
            {{ ruleForm.tiaoma }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ ruleForm.zhuanye }}
          </el-descriptions-item>
          <el-descriptions-item label="编码">
            {{ ruleForm.bianma }}
          </el-descriptions-item>
          <el-descriptions-item label="重要度">
            {{ ruleForm.zhongyaod }}
          </el-descriptions-item>
          <el-descriptions-item label="生产厂家">
            {{ ruleForm.shengchancj }}
          </el-descriptions-item>
          <el-descriptions-item label="出厂日期">
            {{ ruleForm.chuchangrq }}
          </el-descriptions-item>
          <el-descriptions-item label="计时类型">
            {{ ruleForm.jishilx }}
          </el-descriptions-item>
          <el-descriptions-item label="总工作时次">
            {{ ruleForm.zonggongzsc }}
          </el-descriptions-item>
          <el-descriptions-item label="修后工作时次">
            {{ ruleForm.xiuhougzsc }}
          </el-descriptions-item>
          <el-descriptions-item label="删序号">
            {{ ruleForm.cexuh }}
          </el-descriptions-item>
          <el-descriptions-item label="图纸编号">
            {{ ruleForm.tuzhibh }}
          </el-descriptions-item>
          <el-descriptions-item label="批号">
            {{ ruleForm.pihao }}
          </el-descriptions-item>
          <el-descriptions-item label="现处状况">
            {{ ruleForm.xianchuzk }}
          </el-descriptions-item>
          <el-descriptions-item label="状况说明">
            {{ ruleForm.zhuangkuangsm }}
          </el-descriptions-item>
          <el-descriptions-item label="存放位置">
            {{ ruleForm.cunfangwz }}
          </el-descriptions-item>
          <el-descriptions-item label="翻修次数">
            {{ ruleForm.fanxiucs }}
          </el-descriptions-item>
          <el-descriptions-item label="处于超技术状态">
            {{ ruleForm.chuyucjszt }}
          </el-descriptions-item>
          <el-descriptions-item label="安装位置">
            {{ ruleForm.anzhuangwz }}
          </el-descriptions-item>
          <el-descriptions-item label="位置">
            {{ ruleForm.weizhi }}
          </el-descriptions-item>
          <el-descriptions-item label="安装序号">
            {{ ruleForm.anzhuangxh }}
          </el-descriptions-item>
          <el-descriptions-item label="是否启用">
            {{ ruleForm.shifouqy }}
          </el-descriptions-item>
          <el-descriptions-item label="工程号">
            {{ ruleForm.gongchengh }}
          </el-descriptions-item>
          <el-descriptions-item label="章节号">
            {{ ruleForm.zhangjieh }}
          </el-descriptions-item>
          <el-descriptions-item label="挂架状态">
            {{ $util.getguajiazt(ruleForm.guajiazt) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ ruleForm.createName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ ruleForm.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ ruleForm.beizhu }}
          </el-descriptions-item>
        </el-descriptions>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
    wuziqf: '2',
    zhuguandwid: '',
  }
  import search from './components/search.vue'
  import Edit from './components/AndetailManagementEdit.vue'
  import {
    queryKucunmxList,
    queryKucunmxByid,
    updateKunmcSl,
  } from '@/api/kucun'

  export default {
    name: 'WarehouseManagement',
    components: { Edit, search },
    data() {
      return {
        listQuery: Object.assign({}, _listQuery),
        list: null,
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        printlist: null,
        printObj: {
          id: 'print-content',
          popTitle: '打印',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          beforeOpenCallback(vue) {
            vue.printLoading = true
          },
          openCallback(vue) {
            vue.printLoading = false
          },
          closeCallback(vue) {
            console.log('关闭了打印工具')
          },
        },
        printTime: '',
        printTotal: 0,
        centerDialogVisible: false,
        detailrow: {},
        ruleForm: {},
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      onExportButtonClick() {
        const ExportJsonExcel = require('js-export-excel')
        const option = {}
        option.fileName = '库存明细'
        // table-columns
        const tableColumns = this.$refs.table.columns
        // 过滤掉操作
        const _columns = tableColumns.filter((f) => f.property != 'action')
        // 表头
        const _columnsSheetHeader = _columns.map((m) => m.label)
        // 表头对应字段
        const _sheetFilter = _columns.map((m) => m.property)
        // let newlist = this.list.map(item => {
        //   item.liushuilx = item.liushuilx == '1' ? '出库' : '入库'
        //   return item
        // })
        option.datas = [
          {
            sheetData: this.list, //数据源
            sheetFilter: _sheetFilter, //表头过滤字段
            sheetHeader: _columnsSheetHeader, //表头
            // columnWidths: _columns.map(m => m.width), //列宽
          },
        ]
        const toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel() //保存
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        // if (row.id) {
        //   this.$baseConfirm('你确定要删除当前项吗', null, async () => {
        //     const { msg } = await doDelete({ ids: row.id })
        //     this.$baseMessage(msg, 'success')
        //     this.fetchData()
        //   })
        // } else {
        //   if (this.selectRows.length > 0) {
        //     const ids = this.selectRows.map((item) => item.id).join()
        //     this.$baseConfirm('你确定要删除选中项吗', null, async () => {
        //       const { msg } = await doDelete({ ids })
        //       this.$baseMessage(msg, 'success')
        //       this.fetchData()
        //     })
        //   } else {
        //     this.$baseMessage('未选中任何行', 'error')
        //     return false
        //   }
        // }
      },
      async showdetile(row) {
        // let { data } = await queryKucunmxByid({ id: row.id })
        this.ruleForm = row
        this.centerDialogVisible = true
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      queryData() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      async fetchData() {
        const res = await queryKucunmxList(this.listQuery)
        this.list = res.data.rows
        this.total = res.data.total
      },
      search() {
        //搜索
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      resetlist() {
        //重置
        this.listQuery = Object.assign({}, _listQuery)
        this.fetchData()
      },
      print() {
        let time = new Date()
        this.printTime = time.toLocaleString()
        this.printlist =
          this.selectRows.length > 0 ? this.selectRows : this.list
        this.printlist.forEach((item) => {
          this.printTotal += Number(item.biaozhundwsl)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .test-container {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #f6f8f9 !important;
    height: 100%;

    .top-main {
      width: 100%;
      background: #fff;
      padding: 10px 0;
    }

    .bottom-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background-color: #fff;
      margin-top: 10px;
      padding-bottom: 10px;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
        padding: 0 20px 20px;
      }
    }

    .el-button {
      font-size: 0.14rem !important;
    }
  }

  #print-content {
    padding: 20px;

    .print-top {
      text-align: center;

      h2 {
        text-decoration: underline;
        margin: 0 !important;
      }
    }

    .print-time {
      float: right;
      color: #000;
      font-size: 16px;
    }

    table {
      font-size: 14px;
      background-color: #f0f2f5;
      border-collapse: collapse;
      color: #454545;
      table-layout: auto;
      width: 100%;
      text-align: center;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #dadcde;

      thead {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #dadcde;
        line-height: 40px;
        font-weight: bold;
        color: #454c70;
      }

      tr {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #dadcde;
        line-height: 23px;
      }

      td {
        padding: 5px;
        font-size: 14px;
        width: 100px;
        word-break: break-all; // 元素换行
      }

      // // 斑马纹效果stripe
      // tr:nth-child(even) {
      //   background: #F5F7F9;
      // }

      // tr:nth-child(odd) {
      //   background: #FFF;
      // }
    }
  }

  ::v-deep {
    .el-table__fixed-right-patch {
      top: 0px;
      background: #e9f3ff;
    }
  }
</style>
